<template>
  <div class="app-container">
    <el-table :data="deviceList" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item :label="$t('updateDate')">
              <span>{{ props.row.updateDate }}</span>
            </el-form-item>
            <el-form-item :label="$t('createdDate')">
              <span>{{ formatDate(props.row.createdDate) }}</span>
            </el-form-item>
            <el-form-item label="连接延时">
              <span>{{ props.row.connectDelay }}毫秒</span>
            </el-form-item>
            <el-form-item label="设备厂商">
              <span>{{ props.row.systemCompany }}</span>
            </el-form-item>
            <el-form-item label="设备系统类型">
              <span>{{ props.row.systemType }}</span>
            </el-form-item>
            <el-form-item label="系统版本">
              <span>{{ props.row.systemVersion }}</span>
            </el-form-item>
            <el-form-item label="设备地址">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="X轴像素">
              <span>{{ props.row.widthPixels }}</span>
            </el-form-item>
            <el-form-item label="Y轴像素">
              <span>{{ props.row.heightPixels }}</span>
            </el-form-item>
            <el-form-item label="X轴像素密度">
              <span>{{ props.row.xdpi }}</span>
            </el-form-item>
            <el-form-item label="Y轴像素密度">
              <span>{{ props.row.ydpi }}</span>
            </el-form-item>
            <el-form-item label="X轴尺寸">
              <span>{{ props.row.widthSize }}</span>
            </el-form-item>
            <el-form-item label="Y轴尺寸">
              <span>{{ props.row.heightSize }}</span>
            </el-form-item>
            <el-form-item label="屏幕尺寸">
              <span>{{ props.row.screenSize }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="deviceCore" :label="$t('deviceCore')" />
      <el-table-column prop="ip" label="IP" width="180" />
      <el-table-column prop="appVersion" label="APP版本" width="180" />
      <el-table-column prop="lastOnlineTime" label="最近上线时间" :formatter="formatDate" />
      <el-table-column

        :label="$t('function')"
        width="120"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="listAppDeviceActivity(scope.row)"
          >{{ $t('activity') }}
          </el-button>
          <el-button
            style="color: #f56c6c"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >{{ $t('delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 15px 0;text-align: right;">
      <el-pagination
        background
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog :title="$t('activity')" :visible.sync="showDeviceActivityList">
      <el-table
        :data="deviceActivityList"
        style="width: 100%"
      >
        <el-table-column
          prop="name"
          :label="$t('name')"
          width="180"
        />
        <el-table-column
          prop="version"
          :label="$t('version')"
          width="180"
        />
        <el-table-column
          :label="$t('disable')"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.disable"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import { successNotice, formatDate } from '@/util/common'
import { deleteAppDeviceList, pageGetAppDevice } from '@/api/app/appDeviceApi'
import { listAppDeviceActivity } from '@/api/app/appDeviceActivityApi'
import { getPageSize } from '@/util/storage'
export default {
  name: 'Index',
  filters: {},
  data() {
    return {
      deviceActivityList: [],
      deviceList: [],
      currentPage: 1,
      pagerCount: 4,
      total: 0,
      pageSize: getPageSize(),
      showDeviceActivityList: false
    }
  },
  created() {
    this.pageGetAppDevice()
  },
  methods: {
    listAppDeviceActivity(item) {
      listAppDeviceActivity({
        deviceId: item.deviceId
      }).then(res => {
        const { data, code } = res
        if (code === '200') {
          this.deviceActivityList = data
        } else {
          this.deviceActivityList = []
        }
        this.showDeviceActivityList = true
      })
    },
    formatDate(item) {
      return formatDate(this, item.createdDate)
    },
    handleDelete(item) {
      const that = this
      this.$confirm(this.$t('delete'), this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      }).then(function() {
        deleteAppDeviceList({ deviceCores: [item.deviceCore] }).then(res => {
          that.pageGetAppDevice()
        })
      }).catch(function() {
        successNotice(that)
      })
    },
    handleCurrentChange(item) {
      this.currentPage = item
      this.pageGetAppDevice()
    },
    pageGetAppDevice() {
      pageGetAppDevice({
        pageSize: this.pageSize,
        currentPage: this.currentPage
      }).then(res => {
        if (res.code === '200') {
          this.total = res.data.total
          this.deviceList = res.data.data
        }
      })
    }
  }
}
</script>

<style scoped>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 120px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
